<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-xs12">

			<div class="container-fluid" style="padding:0px; margin:0px;">
				<div class="row-fluid clearfix">
					<div class="col-md-12 column">
						<div style="width:1080px; margin:0 auto; margin-top:20px;">
							<div class="conference-cont" style=" margin-top:20px;">
								<div class="set-til">第一步<span style="padding-left:10px;">报名表单设置</span></div>
								<div class="wrapper wrapper-content" style="margin-top: 55px;">
									<div class="row" style="border-left: 2px dashed rgba(0,0,0,0.12);border-right: 2px dashed rgba(0,0,0,0.12);border-bottom: 2px dashed rgba(0,0,0,0.12);">
										<div id="colzuo" class="col-sm-9" style="border-right: 2px dashed rgba(0,0,0,0.12);">
											<div class="ibox float-e-margins">
												<div class="ibox-title">
													<h5>拖拽/点击右侧表单项到此区域</h5>
													<div class="ibox-tools">
														<button type="submit" class="btn btn-warning" data-clipboard-text="testing" id="copy-to-clipboard">复制代码</button>
														<button type="button" class="btn btn-yulan">预览</button>
													</div>
												</div>
												<div class="ibox-content">
													<div class="row form-body form-horizontal m-t">
														<div class="col-md-12 droppable sortable ui-droppable ui-sortable">
														</div>
													</div>

												</div>
											</div>
										</div>
										<div id="colyou" class="col-sm-3">
											<div class="ibox float-e-margins">
												<div class="ibox-title">
													<h5>自定义表单项</h5>
												</div>
												<div class="ibox-content">
													<form role="form" class="form-horizontal m-t">
														<p><b>常用项</b></p>
														<table>
															<tr>
																<td>
																	<div id="name" class="draggable ui-draggable btntexts">
																		姓名
																	</div>
																</td>
																<td>
																	<div id="phone" class="draggable ui-draggable btntexts">
																		电话
																	</div>
																</td>
																<td>
																	<div id="email" class="draggable ui-draggable btntexts">
																		邮箱
																	</div>
																</td>

															</tr>
															<tr>
																<td>
																	<div id="card" class="draggable ui-draggable btntexts">
																		身份证
																	</div>
																</td>
																<td>
																	<div id="www" class="draggable ui-draggable btntexts">
																		个人网站
																	</div>
																</td>
																<td>
																	<div id="logo" class="draggable ui-draggable btntexts">
																		上传Logo
																	</div>
																</td>

															</tr>
															<tr>
																<td>
																	<div id="sex" class="draggable ui-draggable btntexts">
																		性别
																	</div>
																</td>
																<td>
																	<div id="occupation" class="draggable ui-draggable btntexts">
																		职位
																	</div>
																</td>
																<td>
																	<div id="profile" class="draggable ui-draggable btntexts">
																		个人简介
																	</div>
																</td>
															</tr>
														</table>
														<p><b>自定义项</b></p>
														<div id="text" class="form-group draggable ui-draggable btntext">
															<label class="col-sm-12"><i class="fa fa-arrows"></i> 文本框 <img src="../../images/add_form_img01.png"></label>
														</div>
														<div id="select" class="form-group draggable ui-draggable btntext">
															<label class="col-sm-12"><i class="fa fa-arrows"></i> 下拉框 <img src="../../images/add_form_img05.png"></label>
														</div>
														<div id="radio" class="form-group draggable ui-draggable btntext">
															<label class="col-sm-12"><i class="fa fa-arrows"></i> 单选 <img src="../../images/add_form_img03.png"></label>
														</div>
														<div id="checkbox" class="form-group draggable ui-draggable btntext">
															<label class="col-sm-12"><i class="fa fa-arrows"></i> 多选 <img src="../../images/add_form_img04.png"></label>
														</div>
														<div id="textarea" class="form-group draggable ui-draggable btntext">
															<label class="col-sm-12"><i class="fa fa-arrows"></i> 多行文本 <img src="../../images/add_form_img02.png"></label>
														</div>
														<div id="datetime" class="form-group draggable ui-draggable btntext">
															<label class="col-sm-12"><i class="fa fa-arrows"></i> 时间 <img src="../../images/add_form_img06.png"></label>
														</div>
														<div id="file" class="form-group draggable ui-draggable btntext">
															<label class="col-sm-12"><i class="fa fa-arrows"></i> 上传 <img src="../../images/add_form_img07.png"></label>
														</div>
														<div id="picker" class="form-group draggable ui-draggable btntext">
															<label class="col-sm-12"><i class="fa fa-arrows"></i> 省市区 <img src="../../images/add_form_img08.png"></label>
														</div>
													</form>
													<div class="clearfix"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>



		</div>
	</div>
</div>






<script>
	var xxjson = {
		search: '',
		startTime: '',
		stopTime: '',
		shelves: '',
		tbType: '' //状态（1显示2不显示）
	}
	layui.config({
		base: '/src/js/'
	}).use(['jquery', 'mockjs', 'table', 'sidebar', 'form', 'laydate'], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			table = layui.table,
			sidebar = layui.sidebar,
			form = layui.form,
			laydate = layui.laydate;
		var tablesearchidval;
		//第一个实例
		// var typetable = table.render({
		// 	size: 'lg',
		// 	where: xxjson,
		// 	id: 'teachertableid',
		// 	contentType: 'application/json',
		// 	pageSize: 20,
		// 	elem: '#teachertable',
		// 	toolbar: '#teachertoolbar',
		// 	height: '',
		// 	url: HH_URL + QuestionnaireGet, //数据接口
		// 	page: true, //开启分页
		// 	even: true,
		// 	skin: 'nob',
		// 	cellMinWidth: 100,
		// 	cols: [
		// 		[ //表头
		// 			{
		// 				type: 'numbers',
		// 				// fixed: 'left',
		// 				title: '序号',
		// 				width: 50
		// 			},
		// 			// {
		// 			// 	type: 'status',
		// 			// 	title: '状态',
		// 			// 	width: 100,
		// 			// 	templet: '#StatusTp',
		// 			// 	unresize: true
		// 			// }, 
		// 			{
		// 				field: 'tbId',
		// 				title: 'ID',
		// 				hide: true
		// 			}, {
		// 				field: 'tbHeadPortrait',
		// 				title: '封面',
		// 				templet: '#headimgTp',
		// 				event: 'lookheadimg',
		// 				width: 150
		// 			}, {
		// 				field: 'title',
		// 				title: '标题',
		// 				width: 0,
		// 				style: 'text-align:left',
		// 				sort: true
		// 			},{
		// 				field: 'realName',
		// 				title: '讲师',
		// 				width: 150,
		// 				sort: true
		// 			},{
		// 				field: 'surveyTitle',
		// 				title: '问卷调查标题',
		// 				width: 150,
		// 				sort: true
		// 			}, {
		// 				field: 'participateNumber',
		// 				title: '参与人数',
		// 				width: 150,
		// 				sort: true
		// 			}, {
		// 				field: 'shelvestp',
		// 				title: '状态',
		// 				templet: '#shelvesTp',
		// 				event: 'lookshelves',
		// 				width: 100
		// 			}, {
		// 				title: '操作',
		// 				fixed: 'right',
		// 				width: 200,
		// 				toolbar: '#barteachertable'
		// 			}
		// 		]
		// 	],

		// 	done: function(res, curr, cont) {
		// 		// console.log(res)

		// 	laydate.render({
		// 		elem: '#dataxx', //指定元素
		// 		range: true,
		// 		done: function(value, date, endDate) {
		// 			if (date.year == undefined) {
		// 				xxjson.startTime = '';
		// 				xxjson.stopTime = '';
		// 			} else {
		// 				xxjson.startTime = date.year + '-' + date.month + '-' + date.date;
		// 				xxjson.stopTime = endDate.year + '-' + endDate.month + '-' + endDate.date;
		// 			}
		// 			typetable.reload({
		// 				where: xxjson,
		// 				page: {
		// 					curr: 1 //重新从第 1 页开始
		// 				}
		// 			});
		// 			cshfn()
		// 		}
		// 	});

		// 	form.on('select(shelvesfilter)', function(data) {
		// 		xxjson.tbType = data.value
		// 		typetable.reload({
		// 			where: xxjson,
		// 			page: {
		// 				curr: 1 //重新从第 1 页开始
		// 			}
		// 		});
		// 		cshfn()
		// 	});



		// $('#tablesearchid').keydown(function(event) {
		// 	if (event.keyCode == 13) {
		// 		tablesearchidval = $('#tablesearchid').val();
		// 		xxjson.search = tablesearchidval;
		// 		typetable.reload({
		// 			where: xxjson,
		// 			page: {
		// 				curr: 1 //重新从第 1 页开始
		// 			}
		// 		});
		// 		cshfn()
		// 	}
		// })
		// 	}
		// });

	});
	
	//自定义表单开始
	$(document).ready(function() {
	    //预览
	    var chss = 0;
	    $('.btn-yulan').click(function() {
	        if (chss == 0) {
	            $("#colzuo").attr("class", "col-sm-12");
	            $("#colyou").hide();
	            $(".tools").hide();
	            chss++;
	        } else {
	            $("#colzuo").attr("class", "col-sm-9");
	            $("#colyou").show();
	            $(".tools").show();
	            chss = 0;
	        }
	    });
	    setup_draggable();
	    $("#copy-to-clipboard").on("click", function() {
	            var $copy = $(".form-body").clone().appendTo(document.body);
	
	            $copy.find(".tools, :hidden").remove();
	
	            $.each(["draggable", "droppable", "sortable", "dropped", "ui-sortable", "ui-draggable", "ui-droppable", "form-body"], function(i, c) {
	                $copy.find("." + c).removeClass(c).removeAttr("style")
	            });
	
	            var html = html_beautify($copy.html());
	            $copy.remove();
	
	            $modal = get_modal(html, 'cont').modal("show");
	            $modal.find(".btn").remove();
	            $modal.find(".modal-title").html("复制HTML代码");
	            $modal.find(":input:first").select().focus();
	
	            return false
	        })
	        //点击添加表单
	    $(".btntext,.btntexts").click(function() {
	        $(tableList($(this).attr("id"))).appendTo($(".ui-sortable"));
	        $(".labcheck input").unbind('click');
	        $(".labcheck input").click(function() {
	            if ($(this).is(":checked")) {
	                alert("选中");
	            } else {
	                alert("未选中");
	            }
	        });
	        //时间初始化
	                $(".form_datetime").datetimepicker({
	                    language: 'zh-CN', //日期
	                    format: "yyyy/mm/dd hh:ii",
	                    initialDate: new Date(), //初始化当前日期
	                    autoclose: true, //选中自动关闭
	                    todayBtn: true //显示今日按钮
	                });
	                //上传初始化
	                $('.uploadfile').fileinput({
	                    language: 'zh'
	                });
	                //省市区初始化
	                $('.distpicker').distpicker({
	                    province: '省份名',
	                    city: '城市名',
	                    district: '区名',
	                    autoSelect: true,
	                    placeholder: false
	                });
	    });
	});
	
	var setup_draggable = function() {
	    $(".draggable").draggable({
	        appendTo: "body",
	        helper: "clone"
	    });
	    $(".droppable").droppable({
	        accept: ".draggable",
	        helper: "clone",
	        hoverClass: "droppable-active",
	        drop: function(event, ui) {
	            $(".empty-form").remove();
	            var $orig = $(ui.draggable);
	            if (!$(ui.draggable).hasClass("dropped")) {
	                $(tableList($orig.attr("id"))).appendTo(this);
	                //时间初始化
	                $(".form_datetime").datetimepicker({
	                    language: 'zh-CN', //日期
	                    format: "yyyy/mm/dd hh:ii",
	                    initialDate: new Date(), //初始化当前日期
	                    autoclose: true, //选中自动关闭
	                    todayBtn: true //显示今日按钮
	                });
	                //上传初始化
	                $('.uploadfile').fileinput({
	                    language: 'zh'
	                });
	                //省市区初始化
	                $('.distpicker').distpicker({
	                    province: '省份名',
	                    city: '城市名',
	                    district: '区名',
	                    autoSelect: true,
	                    placeholder: false
	                });
	            } else {
	                if ($(this)[0] != $orig.parent()[0]) {
	                    var $el = $orig.clone().appendTo(this);
	                    $orig.remove()
	                }
	            }
	        }
	    }).sortable()
	
	};
	//表单自定义
	function tableList(id) {
	    var content = "";
	    switch (id) {
	        case "text":
	            //文本框
	            var text = '<input type="text" class="form-control" placeholder="请输入文本">';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">文本：</label><div class="col-sm-7">' + text + '</div><p class="tools col-sm-3"><a class="edit-link" name="text" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a><label class="labcheck"><input type="checkbox"> 必填</label></p></div>';
	            break;
	        case "select":
	            //下拉框
	            var select = '<select class="form-control"><option>请选择</option><option>默认</option></select>';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">下拉框：</label><div class="col-sm-7">' + select + '</div><p class="tools col-sm-3"><a class="edit-link" name="select" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a><label class="labcheck"><input type="checkbox"> 必填</label></p></div>';
	            break;
	        case "textarea":
	            //多行文本
	            var textarea = '<textarea class="form-control" placeholder="请输入文本"></textarea>';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">多行文本：</label><div class="col-sm-7">' + textarea + '</div><p class="tools col-sm-3"><a class="edit-link" name="textarea" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a><label class="labcheck"><input type="checkbox"> 必填</label></p></div>';
	            break;
	        case "radio":
	            //单选框
	            var radom = Math.ceil(Math.random() * 100000);
	            var radio = '<label class="radio-inline"><input type="radio" value="默认1" name="rad' + radom + '" checked> 默认1</label><label class="radio-inline"><input type="radio" name="rad' + radom + '" value="默认2"> 默认2</label>';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">单选：</label><div class="col-sm-7">' + radio + '</div><p class="tools col-sm-3"><a class="edit-link" name="radio" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a></p></div>';
	            break;
	        case "checkbox":
	            //多选框
	            var checkbox = '<label class="radio-inline" style="padding-left:0px;"><input type="checkbox" name="默认1"> 默认1</label><label class="radio-inline" style="padding-left:0px;"><input type="checkbox" name="默认2"> 默认2</label>';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">多选：</label><div class="col-sm-7">' + checkbox + '</div><p class="tools col-sm-3"><a class="edit-link" name="checkbox" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a></p></div>';
	            break;
	        case "datetime":
	            //时间
	            var datetime = '<input readonly="" class="form-control form_datetime" type="text" style="border: 1px solid #e5e6e7;">';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">文本：</label><div class="col-sm-7">' + datetime + '</div><p class="tools col-sm-3"><a class="edit-link" name="datetime" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a></p></div>';
	            break;
	        case "file":
	            //上传
	            var file = '<input class="file uploadfile" type="file" multiple data-min-file-count="1">';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">上传：</label><div class="col-sm-7">' + file + '</div><p class="tools col-sm-3"><a class="edit-link" name="file" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a></p></div>';
	            break;
	        case "picker":
	            //省市区
	            var picker = '<form class="form-inline"><div class="distpicker"><div class="form-group" style="margin:0px; padding-right:10px;"><label class="sr-only" for="province10">Province</label><select class="form-control" id="province10"></select></div><div class="form-group" style="margin:0px; padding-right:10px;"><label class="sr-only" for="city10">City</label><select class="form-control" id="city10"></select></div><div class="form-group" style="margin:0px; padding-right:10px;"><label class="sr-only" for="district10">District</label><select class="form-control" id="district10"></select></div></div></form>';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">省市区：</label><div class="col-sm-7">' + picker + '</div><p class="tools col-sm-3"><a class="edit-link" name="picker" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a></p></div>';
	            break;
	        case "name":
	            //姓名
	            var text = '<input type="text" class="form-control" placeholder="请输入你的姓名">';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">姓名：</label><div class="col-sm-7">' + text + '</div><p class="tools col-sm-3"><a class="edit-link" name="text" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a><label class="labcheck"><input type="checkbox"> 必填</label></p></div>';
	            break;
	        case "phone":
	            //电话
	            var text = '<input type="text" class="form-control" placeholder="请输入你的电话">';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">电话：</label><div class="col-sm-7">' + text + '</div><p class="tools col-sm-3"><a class="edit-link" name="text" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a><label class="labcheck"><input type="checkbox"> 必填</label></p></div>';
	            break;
	        case "email":
	            //邮箱
	            var text = '<input type="text" class="form-control" placeholder="请输入你的邮箱">';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">邮箱：</label><div class="col-sm-7">' + text + '</div><p class="tools col-sm-3"><a class="edit-link" name="text" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a><label class="labcheck"><input type="checkbox"> 必填</label></p></div>';
	            break;
	        case "card":
	            //身份证
	            var text = '<input type="text" class="form-control" placeholder="请输入你的身份证">';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">身份证：</label><div class="col-sm-7">' + text + '</div><p class="tools col-sm-3"><a class="edit-link" name="text" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a><label class="labcheck"><input type="checkbox"> 必填</label></p></div>';
	            break;
	        case "www":
	            //姓名
	            var text = '<input type="text" class="form-control" placeholder="请输入你的个人网站地址">';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">个人网站：</label><div class="col-sm-7">' + text + '</div><p class="tools col-sm-3"><a class="edit-link" name="text" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a><label class="labcheck"><input type="checkbox"> 必填</label></p></div>';
	            break;
	        case "logo":
	            //姓名
	            var file = '<input class="file uploadfile" type="file" multiple data-min-file-count="1">';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">上传Logo：</label><div class="col-sm-7">' + file + '</div><p class="tools col-sm-3"><a class="edit-link" name="file" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a></p></div>';
	            break;
	        case "sex":
	            //性别
	            var radom = Math.ceil(Math.random() * 100000);
	            var radio = '<label class="radio-inline"><input type="radio" value="男" name="rad' + radom + '" checked> 男</label><label class="radio-inline"><input type="radio" name="rad' + radom + '" value="女"> 女</label>';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">性别：</label><div class="col-sm-7">' + radio + '</div><p class="tools col-sm-3"><a class="edit-link" name="radio" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a></p></div>';
	            break;
	        case "occupation":
	            //职位
	            var text = '<input type="text" class="form-control" placeholder="请输入你的职位">';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">职位：</label><div class="col-sm-7">' + text + '</div><p class="tools col-sm-3"><a class="edit-link" name="text" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a><label class="labcheck"><input type="checkbox"> 必填</label></p></div>';
	            break;
	        case "profile":
	            //个人简介
	            var textarea = '<textarea class="form-control" placeholder="请输入你的简介"></textarea>';
	            content = '<div class="form-group draggable ui-draggable dropped"><label class="col-sm-2 control-label">个人简介：</label><div class="col-sm-7">' + textarea + '</div><p class="tools col-sm-3"><a class="edit-link" name="textarea" title="设置"><i class="fa fa-cog fa-fw"></i></a><a class="remove-link"><i class="fa fa-trash-o"></i></a><label class="labcheck"><input type="checkbox"> 必填</label></p></div>';
	            break;
	    }
	    return content;
	}
	//表单自定义设置
	function tabUp(tabL, $el) {
	    var content = "";
	    switch (tabL) {
	        case "text":
	            //文本框
	            content = '<div class="row tabup"><div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">标题：</label><div class="col-sm-9"><input type="text" class="form-control" value="' + $el.find("label:eq(0)").html().substring(0, $el.find("label:eq(0)").html().length - 1) + '" placeholder="请输入标题"></div></div><div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">提示信息：</label><div class="col-sm-9"><input type="text" class="form-control" value="' + $el.find("input:eq(0)").attr("placeholder") + '" placeholder="请输入提示信息"></div></div></div>';
	            break;
	        case "select":
	            //下拉框
	            content += '<div class="row tabup">';
	            content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">标题：</label><div class="col-sm-9"><input type="text" class="form-control" value="' + $el.find("label:eq(0)").html().substring(0, $el.find("label:eq(0)").html().length - 1) + '" placeholder="请输入标题"></div></div>';
	            content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">子项1：</label><div class="col-sm-8"><input type="text" class="form-control" value="' + $el.find("select").find("option:eq(0)").html() + '" placeholder="请输入子项"></div><label class="col-sm-1 control-label"><i class="fa fa-plus-square select-add" title="添加" style="font-size:18px; cursor:pointer;"></i></label></div>';
	            content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">子项2：</label><div class="col-sm-8"><input type="text" class="form-control" value="' + $el.find("select").find("option:eq(1)").html() + '" placeholder="请输入子项"></div><label class="col-sm-1 control-label"></label></div>';
	            $el.find("select").find("option").each(function(index) {
	                if (index > 1) {
	                    content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">子项' + (index + 1) + '：</label><div class="col-sm-8"><input type="text" class="form-control" value="' + $(this).html() + '" placeholder="请输入子项"></div><label class="col-sm-1 control-label"><i class="fa fa-trash-o select-del" title="删除" style="font-size:18px; cursor:pointer;"></i></label></div>';
	                }
	            });
	            content += '</div>';
	            break;
	        case "textarea":
	            //多行文本
	            content = '<div class="row tabup"><div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">标题：</label><div class="col-sm-9"><input type="text" class="form-control" value="' + $el.find("label:eq(0)").html().substring(0, $el.find("label:eq(0)").html().length - 1) + '" placeholder="请输入标题"></div></div><div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">提示信息：</label><div class="col-sm-9"><input type="text" class="form-control" value="' + $el.find("textarea").attr("placeholder") + '" placeholder="请输入提示信息"></div></div></div>';
	            break;
	        case "radio":
	            //单选框
	            content += '<div class="row tabup">';
	            content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">标题：</label><div class="col-sm-9"><input type="text" class="form-control" value="' + $el.find("label:eq(0)").html().substring(0, $el.find("label:eq(0)").html().length - 1) + '" placeholder="请输入标题"></div></div>';
	            content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">子项1：</label><div class="col-sm-8"><input type="text" class="form-control" value="' + $el.find("input[type='radio']:eq(0)").attr("value") + '" placeholder="请输入子项"></div><label class="col-sm-1 control-label"><i class="fa fa-plus-square select-add" title="添加" style="font-size:18px; cursor:pointer;"></i></label></div>';
	            content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">子项2：</label><div class="col-sm-8"><input type="text" class="form-control" value="' + $el.find("input[type='radio']:eq(1)").attr("value") + '" placeholder="请输入子项"></div><label class="col-sm-1 control-label"></label></div>';
	            $el.find("input[type='radio']").each(function(index) {
	                if (index > 1) {
	                    content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">子项' + (index + 1) + '：</label><div class="col-sm-8"><input type="text" class="form-control" value="' + $(this).attr("value") + '" placeholder="请输入子项"></div><label class="col-sm-1 control-label"><i class="fa fa-trash-o select-del" title="删除" style="font-size:18px; cursor:pointer;"></i></label></div>';
	                }
	            });
	            content += '</div>';
	            break;
	        case "checkbox":
	            //多选框
	            content += '<div class="row tabup">';
	            content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">标题：</label><div class="col-sm-9"><input type="text" class="form-control" value="' + $el.find("label:eq(0)").html().substring(0, $el.find("label:eq(0)").html().length - 1) + '" placeholder="请输入标题"></div></div>';
	            content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">子项1：</label><div class="col-sm-8"><input type="text" class="form-control" value="' + $el.find("input[type='checkbox']:eq(0)").attr("name") + '" placeholder="请输入子项"></div><label class="col-sm-1 control-label"><i class="fa fa-plus-square select-add" title="添加" style="font-size:18px; cursor:pointer;"></i></label></div>';
	            content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">子项2：</label><div class="col-sm-8"><input type="text" class="form-control" value="' + $el.find("input[type='checkbox']:eq(1)").attr("name") + '" placeholder="请输入子项"></div><label class="col-sm-1 control-label"></label></div>';
	            $el.find("input[type='checkbox']").each(function(index) {
	                if (index > 1) {
	                    content += '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">子项' + (index + 1) + '：</label><div class="col-sm-8"><input type="text" class="form-control" value="' + $(this).attr("name") + '" placeholder="请输入子项"></div><label class="col-sm-1 control-label"><i class="fa fa-trash-o select-del" title="删除" style="font-size:18px; cursor:pointer;"></i></label></div>';
	                }
	            });
	            content += '</div>';
	            break;
	        case "datetime":
	            //时间
	            content = '<div class="row tabup"><div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">标题：</label><div class="col-sm-9"><input type="text" class="form-control" value="' + $el.find("label:eq(0)").html().substring(0, $el.find("label:eq(0)").html().length - 1) + '" placeholder="请输入标题"></div></div></div>';
	            break;
	        case "file":
	            //上传
	            content = '<div class="row tabup"><div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">标题：</label><div class="col-sm-9"><input type="text" class="form-control" value="' + $el.find("label:eq(0)").html().substring(0, $el.find("label:eq(0)").html().length - 1) + '" placeholder="请输入标题"></div></div></div>';
	            break;
	        case "picker":
	            //省市区
	            content = '<div class="row tabup"><div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">标题：</label><div class="col-sm-9"><input type="text" class="form-control" value="' + $el.find("label:eq(0)").html().substring(0, $el.find("label:eq(0)").html().length - 1) + '" placeholder="请输入标题"></div></div></div>';
	            break;
	    }
	    return content;
	}
	var get_modal = function(content, tabL, $el) {
	    var modal = "";
	    if (tabL == "cont") {
	        modal = $('<div class="modal" style="overflow: auto;" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><a type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</a><h4 class="modal-title">表单信息设置</h4></div><div class="modal-body ui-front"><xmp class="form-control"  style="min-height: 200px; overflow-y: auto; margin-bottom: 10px;font-family: Monaco, Fixed">' + content + '</xmp><button class="btn btn-success">确认</button></div></div></div></div>').appendTo(document.body);
	    } else {
	        modal = $('<div class="modal" style="overflow: auto;" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><a type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</a><h4 class="modal-title">表单信息设置</h4></div><div class="modal-body ui-front">' + tabUp(tabL, $el) + '<xmp class="form-control"  style="min-height: 200px; display:none; overflow-y: auto; margin-bottom: 10px;font-family: Monaco, Fixed">' + content + '</xmp><button class="btn btn-success">确认</button></div></div></div></div>').appendTo(document.body);
	    }
	    return modal;
	};
	$(document).on("click", ".edit-link", function(ev) {
	
	    var tabname = $(this).attr('name');
	    var $el = $(this).parent().parent();
	    var $el_copy = $el.clone();
	    var $edit_btn = $el_copy.find(".edit-link").parent().remove();
	    var $modal = get_modal(html_beautify($el_copy.html()), tabname, $el).modal("show");
	
	    $modal.find(".btn-success").click(function(ev2) {
	            //表单自定义js
	            switch (tabname) {
	                case "text":
	                    //文本框
	                    $el.find("label:eq(0)").html($(this).parent().find("input:eq(0)").val() + "：");
	                    $el.find("input:eq(0)").attr("placeholder", $(this).parent().find("input:eq(1)").val());
	                    $modal.modal("hide");
	                    return false;
	                    break;
	                case "select":
	                    //下拉框
	                    var option = "";
	                    var panduan = 0;
	                    $(this).parent().find("input").each(function(index, element) {
	                        if (index == 0) {
	                            $el.find("label:eq(0)").html($(this).parent().find("input:eq(0)").val() + "：");
	                        } else {
	                            if ($(this).val() == "") {
	                                panduan = 1;
	                                $(this).focus();
	                                return false;
	                            } else {
	                                option += "<option>" + $(this).val() + "</option>";
	                            }
	                        }
	                    });
	                    if (panduan != 0) {
	                        alert("不能有空值！");
	                    } else {
	                        $el.find("select").html(option);
	                        $modal.modal("hide");
	                    }
	                    break;
	                case "textarea":
	                    //多行文本
	                    $el.find("label:eq(0)").html($(this).parent().find("input:eq(0)").val() + "：");
	                    $el.find("textarea").attr("placeholder", $(this).parent().find("input:eq(1)").val());
	                    $modal.modal("hide");
	                    return false;
	                    break;
	                case "datetime":
	                    //时间
	                    $el.find("label:eq(0)").html($(this).parent().find("input:eq(0)").val() + "：");
	                    $modal.modal("hide");
	                    return false;
	                    break;
	                case "file":
	                    //上传
	                    $el.find("label:eq(0)").html($(this).parent().find("input:eq(0)").val() + "：");
	                    $modal.modal("hide");
	                    return false;
	                    break;
	                case "picker":
	                    //省市区
	                    $el.find("label:eq(0)").html($(this).parent().find("input:eq(0)").val() + "：");
	                    $modal.modal("hide");
	                    return false;
	                    break;
	                case "radio":
	                    //单选
	                    var option = "";
	                    var panduan = 0;
	                    var radom = Math.ceil(Math.random() * 100000);
	                    $(this).parent().find("input").each(function(index, element) {
	                        if (index == 0) {
	                            $el.find("label:eq(0)").html($(this).parent().find("input:eq(0)").val() + "：");
	                        } else if (index == 1) {
	                            if ($(this).val() == "") {
	                                panduan = 1;
	                                $(this).focus();
	                                return false;
	                            } else {
	                                option += '<label class="radio-inline"><input type="radio" name="rad' + radom + '" value="' + $(this).val() + '" checked=""> ' + $(this).val() + '</label>';
	                            }
	                        } else {
	                            if ($(this).val() == "") {
	                                panduan = 1;
	                                $(this).focus();
	                                return false;
	                            } else {
	                                option += '<label class="radio-inline"><input type="radio" name="rad' + radom + '" value="' + $(this).val() + '" > ' + $(this).val() + '</label>';
	                            }
	                        }
	                    });
	                    if (panduan != 0) {
	                        alert("不能有空值！");
	                    } else {
	                        $el.find("div[class='col-sm-7']").html(option);
	                        $modal.modal("hide");
	                    }
	                    return false;
	                    break;
	                case "checkbox":
	                    //多选
	                    var option = "";
	                    var panduan = 0;
	                    $(this).parent().find("input").each(function(index, element) {
	                        if (index == 0) {
	                            $el.find("label:eq(0)").html($(this).parent().find("input:eq(0)").val() + "：");
	                        } else if (index == 1) {
	                            if ($(this).val() == "") {
	                                panduan = 1;
	                                $(this).focus();
	                                return false;
	                            } else {
	                                option += '<label class="radio-inline"><input type="checkbox" name="' + $(this).val() + '"> ' + $(this).val() + '</label>';
	                            }
	                        } else {
	                            if ($(this).val() == "") {
	                                panduan = 1;
	                                $(this).focus();
	                                return false;
	                            } else {
	                                option += '<label class="radio-inline"><input type="checkbox" name="' + $(this).val() + '" > ' + $(this).val() + '</label>';
	                            }
	                        }
	                    });
	                    if (panduan != 0) {
	                        alert("不能有空值！");
	                    } else {
	                        $el.find("div[class='col-sm-7']").html(option);
	                        $modal.modal("hide");
	                    }
	                    return false;
	                    break;
	            }
	
	        })
	        //select 增加和删除
	    $modal.find(".select-add").click(function() {
	        var str = '<div class="col-sm-12" style="margin-bottom:10px"><label class="col-sm-3 control-label">子项1：</label><div class="col-sm-8"><input type="text" class="form-control" value="" placeholder="请输入子项"></div><label class="col-sm-1 control-label"><i class="fa fa-trash-o select-del" title="删除" style="font-size:18px; cursor:pointer;"></i></label></div>';
	        $(this).parent().parent().parent().parent().find("div[class='row tabup']").append(str);
	
	        $(".select-del").unbind('click');
	
	        $(".select-del").click(function() {
	            var r = confirm("是否删除？")
	            if (r == true) {
	                $(this).parent().parent().remove();
	            }
	
	        });
	        $(this).parent().parent().parent().parent().find("label[class='col-sm-3 control-label']").each(function(index, element) {
	            if (index > 1) {
	                $(this).html("子项" + index + "：");
	            }
	        });
	    });
	    $(".select-del").unbind('click');
	    $modal.find(".select-del").click(function() {
	
	        var r = confirm("是否删除？")
	        if (r == true) {
	            $(this).parent().parent().remove();
	        }
	    });
	    //select 增加和删除
	});
	$(document).on("click", ".remove-link", function(ev) {
	    var r = confirm("是否删除？")
	    if (r == true) {
	        $(this).parent().parent().remove();
	    }
	
	});
	//自定义表单结束
	
</script>

<style scoped>
/*首页*/
.index-nav{ height:92px; width:1080px; margin:0 auto;}
.index-logo{ float:left; width:216px; height:92px; }
.index-navtxt{ float:left;}
.index-navtxt li{ float:left; padding-left:25px; }
.index-navtxt li a{ display: inline-block; text-decoration: none; font-weight: 600; font-size: 18px; margin-top:24px; padding:10px 10px; color:#1a1a1a;}
.index-navtxt li a span{ color:#666; font-size: 16px;}
.index-navtxt li a:hover{ border-bottom:1px solid #00c0ff; }
.index-login{ float:right; }
.index-login li{ float:left; padding-right:10px; line-height: 92px; font-size: 16px; }
.index-login li a{ text-decoration: none; color:#666666; }
.recommend-meet{ float:left;width:1080px; margin:0 auto; }
.recommend-til{ padding-left:100px; padding-bottom:30px; font-size: 22px; color:#000000; }
.recommend-til span{ padding-left:15px; font-size: 16px; color:#999999; }
.recommend-cont{float:left;width:100%; height:100%;}
.recommend-cont ul li{ float:left; padding-left:10px;}
.recommend-box{ width:262px;  position:relative; height:330px;}
.recommend-meetads{margin-bottom:5px; width:100%;  line-height:20px; color:#404040; }
.recommend-meetads span{font-size: 14px; font-size: 12px; padding-left:5px; }
.recommend-btn{margin:10px 0px 1px 81px; width:100px; height:30px; font-size:16px; background-color: #00c0ff; border:0px; color:#fff; text-align: center; }
.recommend-next{ width:100%; background-color:#ccc; }
.recommend-next ul{ float:right; }
.recommend-next ul li{ float:left; padding-right:5px; }
.recommend-next ul li div{ width:30px; height:30px; text-align: center; line-height: 30px; background-color:#b2b2b2; }
.recommend-next ul li div i{ color:#ffffff; }
.suspend-img{ position: absolute;width: 240px;height: 160px;margin-top: 10px;top: 0px;margin-left: 10px; line-height: 160px; text-align: center; color:#ffffff;font-size: 16px; font-weight: 600; background-image: url(../image/img_hed.png); }
.suspend-txt{ position: absolute;margin-top:-30px;width:100%; height:30px; line-height: 30px; text-align: center; font-size: 16px; font-weight: 600;color:#ffffff; background-color:#82add5; opacity: 0.7; }
.news-contant{ float:left; padding:60px 35px 0px 35px;width:359px; height:250px; border-left:1px solid #e5e5e5;}
.more-btn{ margin:0 auto; margin-top:30px; width:130px; height:30px; cursor: pointer; text-align: center; line-height:30px; background-color:#1196ff; }
.hostory-meet{ margin:30px 0px; width:100%; height:300px;}
.hostory-meet ul li{ float:left; }
.hostory-meet ul li:nth-child(1){ width:340px; height:300px; background-color:#dcdcdc; }
.hostory-meet ul li:nth-child(2){ width:400px; height:300px;  }
.hostory-meet ul li:nth-child(3){ width:340px; height:300px; background-color:#dcdcdc; }
.hostory-txt{ margin:90px 20px 0px 90px; padding-left:20px; border-left:1px solid #b2b2b2; }
.hostory-mets{ margin:0px 0px 30px 0px; width:100%; height:300px; }
.hostory-mets ul li{ float:left; }
.hostory-mets ul li:nth-child(1){ width:300px; height:300px;}
.hostory-mets ul li:nth-child(2){ width:780px; height:300px;}
.hostory-txts{ margin:20px 12px 0px 20px; }
.hostory-txts hr{margin:0px; margin-bottom:20px;width:80px; height:1px; border:0px; border-top:1px solid #999;}
.index-foot{float:left; width:100%; height:400px; background-image: url(../image/foot.png); }
.index-footl{float:left; margin-top:70px; }
.index-footl ul li{ line-height: 25px; color:#ffffff; font-size: 14px; }
.index-footl ul li span{ font-size: 20px; }
.index-footr{float:right; padding:30px 0px 0px 80px; margin-right:50px; margin-top:70px; width:400px; height:200px; background-color:#ffffff; }
.index-footr p{ font-size: 18px; }
.index-footr input{position: relative; width:280px; height:40px; line-height: 40px; font-size: 16px; padding-left:5px; color:#999; border:0px; border:1px solid #999; }
.search-icon{ position: absolute;margin-top: 12px;margin-left: -25px; color:#999; }
.index-foottxt{width: 100%;float: left;margin-top:50px;text-align: center;color: #fff;}
/*登录后首页*/
.logo{width:1080px; margin:0 auto; height:100px; line-height: 100px;}
.logo ul li{ float:left; }
.logo-ser{ position: absolute; margin-left:-25px; margin-top:42px; color:#999;}
.logo ul li input{ height:40px; width:250px; font-size: 16px; padding-left: 5px; border:0px; border:1px solid #999; }
.logo ul li button{ height:38px; width:100px; color:#fff; font-size: 16px; line-height: 38px; text-align: center; border:0px; background-color:#00c0ff;  }
.logo-own li{ font-size: 16px; padding-right: 15px; }
.logo-own li i{ color: #66d9ff; font-size: 18px; padding-right:5px; }
/*创建会议*/
.set-nav li{ float:left; }
.set-til{ position: absolute;margin-left:-10px; margin-top:10px;letter-spacing:2px;width:1090px; height:61px; padding-left:40px; line-height: 61px; font-size: 17px; color:#fff;  }
.conference-cont{float:left;width:100%; position: relative; background-color:#fff; box-shadow: 0px 0px 2px #999;}
.conference-tab{ margin-top:80px;margin-bottom:30px; letter-spacing:2px; }
.conference-tab tr td:nth-child(1){ padding-right:5px; text-align:right;}
.conference-tab tr td span{ color:#86201e; display: inline-block; width:10px; }
.conference-tab tr td p{ padding-left:15px;color:#999; font-size: 12px;}
.conference-tab tr td input{ width:350px; height:30px; margin:5px 0px; border:0px; border:1px solid #999; }
.conference-tab tr td textarea{ margin:5px 0px 5px 15px;width:90%; height:150px; border:0px; border:1px solid #999; }
</style>
